<!--
 * new page
 * @author: denghao
 * @since: 2024-04-02
 * LargePlayer.vue
-->
<template>
  <Transition name="fade">
    <div
      :class="['largePlayer']"
      @mouseenter="enterPlayer"
      @mouseleave="leavePlayer"
      v-if="playList.length > 0"
    >
      <div class="lock">
        <div class="lock-content" @click="handleLock">
          <el-icon color="#428eff">
            <component class="icons" :is="lockIcon"></component>
          </el-icon>
        </div>
      </div>
      <div class="largePlayer-detail">
        <el-image
          class="largePlayer-detail-img"
          :src="songPlayDetail.album.picUrl"
          alt="歌曲图"
        />
        <div class="largePlayer-detail-name">
          <div class="title">{{ songPlayDetail.album.name }}</div>
          <div class="singer">{{ songPlayDetail.singer[0].name }}</div>
        </div>
      </div>
      <div class="largePlayer-toolbar">
        <div class="player-tool">
          <el-icon size="24" color="rgba(17, 93, 239, 1)"
            ><CaretLeft
          /></el-icon>
          <el-icon
            size="24"
            color="rgba(17, 93, 239, 1)"
            @click="videoStartPause"
          >
            <component :is="isPlayer"></component>
          </el-icon>
          <el-icon size="24" color="rgba(17, 93, 239, 1)"
            ><CaretRight
          /></el-icon>
        </div>
        <!-- 播放audio组件 -->
        <audio-custom
          ref="audioRef"
          :songUrl="songDetail.url"
          :duration="songPlayDetail.duration"
          @updateSongTime="updateSongTime"
        ></audio-custom>
        <!-- 进度条 -->
        <progress-line
          ref="progressRef"
          @moveSongTime="moveSongTime"
        ></progress-line>
      </div>
      <div class="largePlayer-volume"></div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import ProgressLine from "@/components/progressline/ProgressLine.vue";
import AudioCustom from "./AudioCustom.vue";
import { useStore } from "vuex";
/**
 * ---------变量定义---------
 */
const lockIcon = ref<string>("Unlock");
const audioRef = ref<any>(null);
const volume = ref<boolean>(false);
const progressRef = ref<any>(null);
const store = useStore();

/**
 * ---------方法---------
 */

const songPlayIndex = computed(() => store.getters.songPlayIndex);
const playList = computed(() => store.getters.playList);
const songDetail = computed(() => store.state.song.songDetail);
const songPlayDetail = computed(() => playList.value[songPlayIndex.value]);
const isPlayer = computed(() =>
  store.state.song.isPlayed ? "VideoPause" : "VideoPlay"
);
const emits = defineEmits(["enterPlayer", "leavePlayer", "playStart"]);
const enterPlayer = () => {
  emits("enterPlayer");
};
const leavePlayer = () => {
  if (lockIcon.value == "unlock") {
    emits("leavePlayer");
  }
};

// 是否将播放栏固定住
const handleLock = () => {
  lockIcon.value = lockIcon.value != "lock" ? "lock" : "unlock";
  if (lockIcon.value == "lock") {
    emits("enterPlayer");
  }
};
// 播放与暂停
const videoStartPause = () => {
  store.commit("setPlayStatus", !store.state.song.isPlayed);
  audioRef.value?.toggleAudio();
};
// 更新音频时间
const updateSongTime = (currentTime: number) => {
  progressRef.value.setCurrntTime(currentTime);
};

//移动更新音频时间
const moveSongTime = (moveSongTime: number) => {
  audioRef.value.currentTime = moveSongTime;
  console.log(audioRef.value.currentTime, moveSongTime, "moveSongTime");
};
//静音
const volumeHandler = () => {
  volume.value = !volume.value;
  audioRef.value?.volumeHandler(volume.value);
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.largePlayer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .lock {
    width: 100%;
    height: 25px;
    position: absolute;
    top: -25px;
    left: 0;
    z-index: 3;
    .lock-content {
      position: absolute;
      right: 200px;
      display: inline-block;
      width: 55px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 50px 50px 0px 0px;
      background: var(--el-menu-bg-color);
      border-top: 1px rgba(17, 93, 239, 0.16) solid;
      box-shadow: 0 5px 40px -1px rgba(2, 10, 18, 0.1);
      cursor: pointer;
    }
  }
  .largePlayer-detail {
    width: 180px;
    height: 64px;
    display: flex;
    align-items: center;
    .largePlayer-detail-img {
      width: 50px;
      height: 50px;
      border-radius: 8px;
    }
    .largePlayer-detail-name {
      margin-left: 10px;
      .title {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -0.2px;
        line-height: 20px;
        color: var(--largePlay-title-color);
        text-align: left;
        vertical-align: middle;
      }
      .singer {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.2px;
        line-height: 16px;
        color: var(--largePlay-songer-color);
        text-align: left;
        vertical-align: top;
      }
    }
  }
  .largePlayer-toolbar {
    width: 503px;
    margin-top: 10px;
    .player-tool {
      width: 503px;
      display: flex;
      justify-content: space-around;
    }
  }
  .largePlayer-volume {
    width: 503px;
  }
}
</style>
